<template>
  <div>
    <h1>嵌套路由</h1>
    <router-link to="./content1" tag="button">content1</router-link>
    <router-link to="./content2" tag="button">content2</router-link>
    <router-view></router-view>
    <hr>
    <h1>通过AXIOS进行前后端交互</h1>
    <button @click="getInfo">get info</button>
    <p>歌手的昵称： {{nickname}}</p>
  </div>
</template>

<script>
import axios from 'axios'
import {cloudmusic} from '.././serve'
export default {
  data() {
    return {
      nickname: ''
    }
  },
  methods: {
    getInfo() {
        // 为给定 ID 的 user 创建请求
        let _this = this;
        // axios.get(cloudmusic+'?type=lyric&id=28012031')
        axios.get(cloudmusic,{
            params: {
                type: 'lyric',
                id: '28012031'
            }
        })
        .then(function (response) {
            console.log(response);
            _this.nickname = response.data.transUser.nickname
        })
        .catch(function (error) {
            console.log(error);
        });
    }
  },
}
</script>

<style scoped>

</style>